<template>
  <!-- 首页下面的专题精选 -->
  <view class="themeItem">
      <navigator :url='`/pages/classlist/classlist?id=${ClassIfyList._id}&name=${ClassIfyList.name}`' class="box" v-if="!isMore" >
        <image class="pic" :src="ClassIfyList.picurl" mode="aspectFill"></image>
        <view class="mask">{{ClassIfyList.name}}</view>
        <view class="tab">{{formatTimeDifference(ClassIfyList.updateTime)}}前更新</view>
        
      </navigator>
      <!-- 首页下面的专题精选更多 -->
      <navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">
        <image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
        <view class="mask">
          <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
          <text class="text">更多</text>
        </view>
      </navigator>
      
  </view>
</template>

<script setup>
  import {formatTimeDifference} from '@/utils/common.js'
  import {apiwallList} from '@/api/apis.js'
  
  const props = defineProps({
    isMore:{
      type:Boolean,
      default:false
    },
    ClassIfyList:{
      type:Object,
      default:()=>{
          return {
            name:'默认名称',
            picurl:'../../common/images/preview1.jpg',
            updateTime:Date.now() - 1000*60*60*5
          }
      }
    }
  })
  
</script>

<style scoped lang="scss">
.themeItem{
  .box{
    position: relative;
    // top: 0;
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .pic{
      width: 100%;
      height: 100% ;
    }
    .mask{
      width: 100%;
      height: 70rpx;
      font-size: 30rpx;
      position: absolute;
      bottom: 0%;
      left: 0;
      color: #fff;
      font-size: 30rpx;
      font-weight: 600;
      background-color: rgba(0,0,0,0.2);
      backdrop-filter: blur(20rpx); //模糊滤镜
      display: flex;
      justify-content: center;
      align-items: center; 
    }
    .tab{
      position: absolute;
      top: 0%;
      left: 0;
      background-color: rgba(250,129,90,0.7);
      backdrop-filter: blur(30rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      border-radius: 0 0 20rpx 0;
    }
  }
}
.box.more{
  .mask{
    flex-direction: column;
    width: 100%;
    height: 100%;
    .text{
      font-size: 28rpx;
    }
  }
}
</style>